<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>个人注册</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/register.js"></script>
	<link rel="stylesheet" type="text/css" href="css/registered.css"/>
  </head>
  
  <body>
   <!-- **************头部页面开始****** -->
		<div class="w">
			<div id="logo">
				<a href="registered.jsp"><img src="registeredImg/registered.png" alt=""></a>
			</div>
			<!-- 左边登录logo结束 -->
			
			<div id="fudy"><span id="yiyou">已有账户?</span>&nbsp;&nbsp;<a href="login.jsp" id="lo">请登录></a></div>
		</div>
		<div class="login-box f-mt10 f-pb50">
			<div class="main">    
		    	<div class="reg-box-pan display-inline">  
		        	<div class="step">        	
		                <ul>
		                    <li class="col-xs-4 on">
		                        <span class="num"><em class="f-r5"></em><i>1</i></span>                	
		                        <span class="line_bg lbg-r"></span>
		                        <p class="lbg-txt">填写账户信息</p>
		                    </li>
		                    <li class="col-xs-4">
		                        <span class="num"><em class="f-r5"></em><i>2</i></span>
		                        <span class="line_bg lbg-l"></span>
		                        <span class="line_bg lbg-r"></span>
		                        <p class="lbg-txt">验证账户信息</p>
		                    </li>
		                    <li class="col-xs-4">
		                        <span class="num"><em class="f-r5"></em><i>3</i></span>
		                        <span class="line_bg lbg-l"></span>
		                        <p class="lbg-txt">注册成功</p>
		                    </li>
		                </ul>
		            </div>
		            <div class="reg-box" id="verifyCheck" style="margin-top:20px;">
		            	<div class="part1">                	
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>用户名：</span>    
		                        <div class="f-fl item-ifo">
		                            <input type="text" maxlength="20" class="txt03 f-r3 required" tabindex="1" data-valid="isNonEmpty||between:3-20||isUname" data-error="用户名不能为空||用户名长度3-20位||只能输入中文、字母、数字、下划线，且以中文或字母开头" id="adminNo">                            
		                            <span class="ie8 icon-close close hide"></span>
		                            <label class="icon-sucessfill blank hide"></label>
		                            <label class="focus"><span style="font-size: 12px;">3-20位，中文、字母、数字、下划线的组合，以中文或字母开头</span></label>
		                            <label class="focus valid" id="kk"></label>
		                        </div>
		                    </div>
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>手机号：</span>    
		                        <div class="f-fl item-ifo">
		                            <input type="text" class="txt03 f-r3 required" keycodes="tel" tabindex="2" data-valid="isNonEmpty||isPhone" data-error="手机号码不能为空||手机号码格式不正确" maxlength="11" id="phone"> 
		                            <span class="ie8 icon-close close hide"></span>                           
		                            <label class="icon-sucessfill blank hide"></label>
		                            <label class="focus" id="pp">请填写11位有效的手机号码</label>
		                            <label class="focus valid" ></label>
		                        </div>
		                    </div>
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>密码：</span>    
		                        <div class="f-fl item-ifo">
		                            <input type="password" id="password" maxlength="20" class="txt03 f-r3 required" tabindex="3" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-20||level:2" data-error="密码不能为空||密码长度6-20位||该密码太简单，有被盗风险，建议字母+数字的组合"> 
		                            <span class="ie8 icon-close close hide" style="right:55px"></span>
		                            <span class="showpwd" data-eye="password"></span>                        
		                            <label class="icon-sucessfill blank hide"></label>
		                            <label class="focus">6-20位英文（区分大小写）、数字、字符的组合</label>
		                            <label class="focus valid"></label>
		                            <span class="clearfix"></span>
		                            <label class="strength">
		                            	<span class="f-fl f-size12" style="font-size: 12px;">安全程度：</span>
		                            	<b><i>弱</i><i>中</i><i>强</i></b>
		                            </label>    
		                        </div>
		                    </div>
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>确认密码：</span>    
		                        <div class="f-fl item-ifo">
		                            <input type="password" maxlength="20" class="txt03 f-r3 required" tabindex="4" style="ime-mode:disabled;" onpaste="return  false" autocomplete="off" data-valid="isNonEmpty||between:6-16||isRepeat:password" data-error="密码不能为空||密码长度6-16位||两次密码输入不一致" id="rePassword">
		                            <span class="ie8 icon-close close hide" style="right:55px"></span>
		                            <span class="showpwd" data-eye="rePassword"></span>
		                            <label class="icon-sucessfill blank hide"></label>
		                            <label class="focus">请再输入一遍上面的密码</label> 
		                            <label class="focus valid"></label>                          
		                        </div>
		                    </div>
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span>    
		                        <div class="f-fl item-ifo">
		                            <input type="text" maxlength="4" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" id="randCode" data-valid="isNonEmpty" data-error="验证码不能为空"> 
		                            <span class="ie8 icon-close close hide"></span>
		                            <label class="f-size12 c-999 f-fl f-pl10">
		                            	<img src="registeredImg/yzm.jpg">                               
		                            </label>                        
		                            <label class="icon-sucessfill blank hide" style="left:380px"></label>
		                            <label class="focusa">看不清？<a href="javascript:;" class="c-blue">换一张</a></label>   
		                            <label class="focus valid" style="left:370px"></label>                        
		                        </div>
		                    </div>
		                    <div class="item col-xs-12" style="height:auto">
		                        <span class="intelligent-label f-fl">&nbsp;</span>  
		                        <p class="f-size14 required" data-valid="isChecked" data-error="请先同意条款"> 
		                        	<input type="checkbox" checked="" > &nbsp;
		                        	<a href="javascript:showoutc();" class="f-ml5">我已阅读并同意条款</a>
		                        </p>                       
		                        <label class="focus valid"></label> 
		                    </div> 
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl">&nbsp;</span>    
		                        <div class="f-fl item-ifo">
		                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part1">下一步</a>                         
		                        </div>
	                   	 	</div> 
                		</div>
                		<div class="part2" style="display:none">
		                	<div class="alert alert-info" style="width:700px;font-size: 14px;">短信已发送至您手机，请输入短信中的验证码，确保您的手机号真实有效。</div>                    
		                    <div class="item col-xs-12 f-mb10" style="height:auto">
		                        <span class="intelligent-label f-fl">手机号：</span>    
		                        <div class="f-fl item-ifo c-blue" style="font-size: 14px;">
		                            <span id="w"></span>
		                        </div>
		                    </div>
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>验证码：</span>    
		                        <div class="f-fl item-ifo">
		                            <input type="text" maxlength="6" id="verifyNo" class="txt03 f-r3 f-fl required" tabindex="4" style="width:167px" data-valid="isNonEmpty||isInt" data-error="验证码不能为空||请输入6位数字验证码"> 
		                           	<span class="btn btn-gray f-r3 f-ml5 f-size13" id="time_box" disabled="" style="width:97px;display:none;">发送验证码</span>
		                            <span class="btn btn-gray f-r3 f-ml5 f-size13" id="verifyYz" style="width:97px;">发送验证码</span>
		                            <span class="ie8 icon-close close hide" style="right:130px"></span>
		                            <label class="icon-sucessfill blank hide"></label>
		                            <label class="focus"><span style="16px">请查收手机短信，并填写短信中的验证码（此验证码3分钟内有效）</span></label>   
		                            <label class="focus valid" id=""></label>                        
		                        </div>
		                    </div>
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl">&nbsp;</span>    
		                        <div class="f-fl item-ifo">
		                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part2">注册</a>                         
		                        </div>
		                    </div> 
		                </div>
		                <div class="part3" style="display:none">
		                	<div class="item col-xs-12">
		                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>真实姓名：</span>    
		                        <div class="f-fl item-ifo">
		                            <input type="text" maxlength="10" id="ddd" class="txt03 f-r3 required" tabindex="1" data-valid="isNonEmpty||between:2-10||isZh" data-error="真实姓名不能为空||真实姓名长度2-10位||只能输入中文" id="adminNo">   
		                            <span class="ie8 icon-close close hide"></span>                         
		                            <label class="icon-sucessfill blank hide"></label>
		                            <label class="focus">2-10位，中文真实姓名</label>
		                            <label class="focus valid"></label>
		                        </div>
		                    </div>
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl"><b class="ftx04">*</b>身份证号：</span>    
		                        <div class="f-fl item-ifo">
		                            <input type="text" class="txt03 f-r3 required" id="sss" tabindex="2" data-valid="isNonEmpty||isCard" data-error="身份证号不能为空||身份证号码格式不正确" maxlength="18" id="phone" >    
		                            <span class="ie8 icon-close close hide"></span>                        
		                            <label class="icon-sucessfill blank hide"></label>
		                            <label class="focus">请填写18位有效的手机号码</label>
		                            <label class="focus valid"></label>
		                        </div>
		                    </div>
		                    <div class="item col-xs-12">
		                        <span class="intelligent-label f-fl">&nbsp;</span>    
		                        <div class="f-fl item-ifo">
		                           <a href="javascript:;" class="btn btn-blue f-r3" id="btn_part3">下一步</a>                         
		                        </div>
		                    </div>
		                </div>  
		                 <div class="part4 text-center" style="display:none">
		                	<h3>您已<span id="l"></span>，账户:<span id="s"></span> 密码:<span id="d"></span>现在开始您的投资之旅吧！</h3>
		                    <p class="c-666 f-mt30 f-mb50">页面将在 <strong id="times" class="f-size18">10</strong> 秒钟后，跳转到 <a href="login.jsp" class="c-blue">登录页面</a></p>
		                </div>      
                	</div>
		       </div>
   			</div>
   		</div>
   		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
   		<script type="text/javascript">
   			$(function(){
   				$("#btn_part1").click(function(){						
					if(!verifyCheck._click()) return;
					var phone = $("#phone").val();
					$(".part1").hide();
					$(".part2").show();
					$("#w").html(phone);
					$(".step li").eq(1).addClass("on");
				});
				//第二页的确定按钮
				$("#btn_part2").click(function(){			
					if(!verifyCheck._click()) return;
					$(".part2").hide();
					$(".part3").show();	
				});	
				//第三页的确定按钮
				$("#btn_part3").click(function(){			
					if(!verifyCheck._click()) return;
					var name = $("#adminNo").val();
					var pwd = $("#password").val();
					var phone = $("#phone").val();
					var userName = $("#ddd").val();
					var identityCode = $("#sss").val();
					$.ajax({
					"url" : "Jingdong_userSys", //请求路径
					"type" : "POST", //请求参数
					"data" : "name="+name+"&pwd="+pwd+"&phone="+phone+"&ddd="+userName+"&sss="+identityCode+"&user=add", //参数
					"dataType" : "text", //返回类型
					"success" : function(data) {
						if (data > 0) {
							$("#l").html("注册成功");
							$(".part4").show();
							$("#s").html(name);
							$("#d").html(pwd);
							$(".step li").eq(2).addClass("on");
							countdown({
								maxTime:10,
								ing:function(c){
									$("#times").text(c);
								},
								after:function(){
									window.location.href="login.jsp";//		
								}
							});		
						} else {
							alert("注册失败");
							location.href = "registered.jsp";
							return;
						}
					}
				});
					$(".part3").hide();
				});	
				$(".required").click(function(){
					$(this).removeClass("v_error");//删除默认样式
				});
				$("#adminNo").blur(function(){
					var name = $("#adminNo").val();
					$.post("Jingdong_userSys", "name="+name+"&user=separate",
				  		 function(data){
				  		$(".icon-sucessfill").hide();
				    	 $("#kk").html(data);
				    	 if(data=="")
				    	 {
				    		 if(name.length >= 3){
				    			 $(".icon-sucessfill").show();
				    		 }else{
				    			 $("#kk").html("请输入正确的用户名");
				    		 }
				    	 }
				  	});
				});
				var sms = "";
				$("#verifyYz").click(function() {
					var phone = $("#phone").val();
					alert(phone);
					if (phone != "") {
						$.ajax({
							url : "SendSms",  //发送请求 
							type : "post",
							data : {
								"phone" : phone
							},
							success : function(result) {
								sms = result;
							}
						});
					} else {
						alert("请输入手机号");
						return false;
					}
				});
				$("#btn_part2").click(function() {
					var code = $("#verifyNo").val();
						alert(code);
						alert(sms);
						if (sms == code) {
							//第二页的确定按钮		
							if(!verifyCheck._click()) return;
							$(".part2").hide();
							$(".part3").show();	
						} else {
							$("#sslls").html("验证码错误");
						}
				});
				$("#verifyNo").blur(function(){
					var names = $("#verifyNo").val();
					if(names.length < 6){
						$(".icon-sucessfill").hide();
						 $("#sslls").html("请输入有效验证码");
					}
				    if(names.length>=6){
				    	$(".icon-sucessfill").show();
				    }
				});
   			});
   		</script>
  </body>
</html>
